<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{padding: 0; margin: 0; list-style-type: none;}
    .cont{ width: 100vw; height: 100vh; background: red; transition: all 1.5s;}
    .cont.active{ transform: translateY(100px); }
</style>
<body>
    <div class="cont">
        
    </div>
    <script>
         let cont = document.querySelector('.cont');
         
         //监听点击事件
         cont.addEventListener('click', function(){
             cont.classList.toggle('active');
         });
         
         //第一次坐标
         let x1 = 0, y1 = 0;
         //监听触摸事件 
         cont.addEventListener('touchstart', function(e){
            
             console.log(e.touches[0].clientX, e.touches[0].clientY);
             x1 = e.touches[0].clientX;
             y1 = e.touches[0].clientY;
         });
         cont.addEventListener('touchmove', function(e){
             console.log(e.touches[0].clientX, e.touches[0].clientY);
             let x2 = e.touches[0].clientX, y2 = e.touches[0].clientY;
             let disX = x2 - x1, disY = y2 - y1;
             //移动距离
             let moveX = disX, moveY = disY;
             //移动距离大于100px
             if(moveY > 100){
                 cont.classList.add('active');
             }
         });
         cont.addEventListener('touchend', function(e){
             console.log(e);
             cont.classList.remove('active');
         });
         //监听鼠标事件 
         cont.addEventListener('mousedown', function(e){
             console.log('mousedown');
         })

         

    </script>
</body>
</html>